<template>
  <div>
    <GSearch :isMoreSearch="false" :query-params="queryParams" @query-params="getTableData(true)">
      <el-row :gutter="12">
        <el-col :span="8">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入文件原始名称"
            @keyup.native.enter="getTableData(true)"
          />
        </el-col>

        <el-col :span="8">
          <el-date-picker
            v-model="queryParams.queryDate"
            class="w-full"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="handleDate"
          >
          </el-date-picker>
        </el-col>

        <el-col :span="8">
          <el-input-number
            v-model="queryParams.minSize"
            placeholder="文件大小(起)"
            :controls="false"
            class="wp-50"
          ></el-input-number>
          <el-input-number
            v-model="queryParams.maxSize"
            @change="handleChange"
            placeholder="文件大小(终)"
            class="wp-50"
            :controls="false"
            :disabled="!queryParams.minSize"
          ></el-input-number>
        </el-col>
      </el-row>
    </GSearch>

    <GTable :fields="tableHeader" :data="tableData" :loading="loading" :pagination="pagination">
      <!-- <template #action="{ row }">
        <el-button type="text" @click="handleUpdate(row.id)">修改</el-button>
        <el-button type="text" @click="handleDel(row.id)">删除</el-button>
      </template> -->
    </GTable>
  </div>
</template>

<script>
import { getAttachementApi, delAttachementApi } from '@/api/attachement-api';
import { tableHeader } from './attachement';

export default {
  name: 'Attachement',
  components: {},
  data() {
    return {
      loading: false,
      tableHeader,
      tableData: [],
      pagination: {
        total: 0, // 总数
        page: 1, // 当前页
        size: 10 // 每页显示数据个数
      },
      queryParams: {
        name: '',
        queryDate: [],
        minSize: undefined,
        maxSize: undefined
      },

      displayData: {
        create: false,
        detail: false
      },
      editId: 0
    };
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    // ** ---------- query ---------- **
    handleDate(date) {
      this.getTableData(true);
    },
    handleChange(val) {
      this.getTableData(true);
    },
    // ** ---------- query End---------- **

    // ** ---------- table ---------- **

    async getTableData(reset = false) {
      try {
        if (reset) {
          this.pagination.page = 1;
        }
        this.queryParams;

        const params = {
          page: this.pagination.page,
          limit: this.pagination.size,
          ...this.$utils.formatParams(this.queryParams)
        };
        const {
          data: { items, meta }
        } = await getAttachementApi(params);

        // items.map((item) => {
        //   item.roleNames = item.roles.map(({ name }) => name)?.join(',');
        //   item.isAdminStr = item.isAdmin === 1 ? '是' : '否';
        //   return item;
        // });

        this.tableData = items ?? [];
        this.pagination.total = meta?.totalItems ?? 0;
      } catch (err) {
        console.warn(err);
      }
    },
    // 勾选数据
    handleSelectionChange(value) {
      this.selectedList = value ?? [];
    },
    // 翻页
    handlePagination(value) {
      Object.assign(this.page, value);
      this.getTableData();
    },
    // ** ---------- table End---------- **

    // ** ---------- crud ---------- **

    // 重置数据 - 单独提出，避免语义混淆
    handleResetData() {
      this.selectedList = [];
      this.getTableData();
    },

    handleCreate() {
      // 重置编辑id
      this.editId = 0;
      this.displayData.create = true;
    },

    handleCloseCreate() {
      this.displayData.create = false;
      this.handleResetData();
    },

    handleExport() {},

    handleUpdate(id) {
      this.editId = id;
      this.displayData.create = true;
    },
    handleDel(id) {
      console.log(id);
      this.$modal
        .confirm('确定删除?')
        .then(async () => {
          try {
            const { code } = await delAttachementApi(id);
            if (code === 200) {
              this.$modal.msgSuccess('操作成功');
              this.getTableData();
            }
          } catch (err) {
            console.warn(err);
          }
        })
        .catch(() => {
          this.$modal.msg('已取消操作');
        });
    }

    // ** ---------- crud End---------- **
  }
};
</script>

<style lang="scss" scoped></style>
